<template>
  <div class="progress-page">
    <!-- 总体进度概览 -->
    <el-row :gutter="20" class="overview-section">
      <el-col :span="6" v-for="stat in overallStats" :key="stat.label">
        <el-card class="stat-card" shadow="hover">
          <el-icon :size="32" :color="stat.color">
            <component :is="stat.icon" />
          </el-icon>
          <div class="stat-info">
            <div class="stat-value">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 课程进度详情 -->
    <el-card class="courses-section">
      <template #header>
        <div class="section-header">
          <h2>课程学习进度</h2>
          <el-radio-group v-model="sortBy" size="small">
            <el-radio-button label="progress">按进度</el-radio-button>
            <el-radio-button label="time">按时长</el-radio-button>
            <el-radio-button label="score">按得分</el-radio-button>
          </el-radio-group>
        </div>
      </template>

      <div class="course-list">
        <div v-for="course in sortedCourses" :key="course.id" class="course-item">
          <div class="course-header">
            <div class="course-info">
              <el-icon :size="24" :color="course.iconColor">
                <component :is="course.icon" />
              </el-icon>
              <h3>{{ course.name }}</h3>
            </div>
            <el-button type="primary" link @click="viewCourseDetail(course.id)">
              查看详情
            </el-button>
          </div>

          <div class="progress-info">
            <div class="progress-item">
              <span class="label">总体进度</span>
              <el-progress 
                :percentage="course.progress"
                :status="course.progress === 100 ? 'success' : ''"
              />
            </div>
            <div class="progress-stats">
              <div class="stat">
                <div class="number">{{ course.completedPoints }}/{{ course.totalPoints }}</div>
                <div class="desc">知识点</div>
              </div>
              <div class="stat">
                <div class="number">{{ course.studyTime }}h</div>
                <div class="desc">学习时长</div>
              </div>
              <div class="stat">
                <div class="number">{{ course.exerciseCount }}</div>
                <div class="desc">已做习题</div>
              </div>
              <div class="stat">
                <div class="number">{{ course.correctRate }}%</div>
                <div class="desc">正确率</div>
              </div>
            </div>
          </div>

          <!-- 最近学习的知识点 -->
          <div class="recent-points">
            <h4>最近学习</h4>
            <el-scrollbar max-height="120px">
              <div v-for="point in course.recentPoints" 
                   :key="point.id"
                   class="point-item"
                   @click="navigateToPoint(point.id)">
                <div class="point-info">
                  <el-icon><component :is="point.completed ? 'Check' : 'Loading'" /></el-icon>
                  <span>{{ point.title }}</span>
                </div>
                <el-tag size="small" :type="point.difficultyType">
                  {{ point.difficulty }}
                </el-tag>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 学习趋势图 -->
    <el-card class="trend-section">
      <template #header>
        <div class="section-header">
          <h2>学习趋势</h2>
          <el-select v-model="trendTimeRange" size="small">
            <el-option label="最近一周" value="week" />
            <el-option label="最近一月" value="month" />
            <el-option label="最近三月" value="quarter" />
          </el-select>
        </div>
      </template>
      <v-chart class="trend-chart" :option="trendChartOption" autoresize />
    </el-card>

    <!-- 知识掌握分布 -->
    <el-card class="distribution-section">
      <template #header>
        <h2>知识掌握分布</h2>
      </template>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="chart-container">
            <h3>难度分布</h3>
            <v-chart class="pie-chart" :option="difficultyChartOption" autoresize />
          </div>
        </el-col>
        <el-col :span="12">
          <div class="chart-container">
            <h3>掌握程度分布</h3>
            <v-chart class="pie-chart" :option="masteryChartOption" autoresize />
          </div>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart } from 'echarts/charts'
import { 
  GridComponent, 
  TooltipComponent, 
  LegendComponent,
  TitleComponent 
} from 'echarts/components'

// 注册必要的组件
use([
  CanvasRenderer,
  LineChart,
  PieChart,
  GridComponent,
  TooltipComponent,
  LegendComponent,
  TitleComponent
])

const router = useRouter()
const sortBy = ref('progress')
const trendTimeRange = ref('week')

// 总体统计数据
const overallStats = ref([
  {
    label: '总学习时长',
    value: '168小时',
    icon: 'Timer',
    color: '#409EFF'
  },
  {
    label: '已完成知识点',
    value: '286个',
    icon: 'Check',
    color: '#67C23A'
  },
  {
    label: '练习题正确率',
    value: '85%',
    icon: 'DataLine',
    color: '#E6A23C'
  },
  {
    label: '学习天数',
    value: '45天',
    icon: 'Calendar',
    color: '#F56C6C'
  }
])

// 课程数据
const courses = ref([
  {
    id: 1,
    name: '数据结构与算法',
    icon: 'Connection',
    iconColor: '#409EFF',
    progress: 75,
    completedPoints: 45,
    totalPoints: 60,
    studyTime: 42,
    exerciseCount: 150,
    correctRate: 88,
    recentPoints: [
      {
        id: 1,
        title: '红黑树',
        completed: true,
        difficulty: '困难',
        difficultyType: 'danger'
      },
      {
        id: 2,
        title: '动态规划基础',
        completed: false,
        difficulty: '中等',
        difficultyType: 'warning'
      }
    ]
  },
  // ... 其他课程数据
])

// 根据选择的方式排序课程
const sortedCourses = computed(() => {
  return [...courses.value].sort((a, b) => {
    switch (sortBy.value) {
      case 'progress':
        return b.progress - a.progress
      case 'time':
        return b.studyTime - a.studyTime
      case 'score':
        return b.correctRate - a.correctRate
      default:
        return 0
    }
  })
})

// 学习趋势图配置
const trendChartOption = ref({
  tooltip: {
    trigger: 'axis'
  },
  legend: {
    data: ['学习时长', '完成知识点']
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: [
    {
      type: 'value',
      name: '学习时长(小时)'
    },
    {
      type: 'value',
      name: '知识点数量'
    }
  ],
  series: [
    {
      name: '学习时长',
      type: 'line',
      smooth: true,
      data: [3, 4, 2, 5, 3, 6, 4]
    },
    {
      name: '完成知识点',
      type: 'line',
      yAxisIndex: 1,
      smooth: true,
      data: [2, 3, 1, 4, 2, 5, 3]
    }
  ]
})

// 难度分布图配置
const difficultyChartOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [
        { value: 35, name: '简单' },
        { value: 45, name: '中等' },
        { value: 20, name: '困难' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

// 掌握程度分布图配置
const masteryChartOption = ref({
  tooltip: {
    trigger: 'item'
  },
  legend: {
    orient: 'vertical',
    left: 'left'
  },
  series: [
    {
      type: 'pie',
      radius: '50%',
      data: [
        { value: 40, name: '已掌握' },
        { value: 35, name: '待巩固' },
        { value: 25, name: '需加强' }
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      }
    }
  ]
})

// 导航方法
const viewCourseDetail = (courseId) => {
  router.push(`/course/${courseId}`)
}

const navigateToPoint = (pointId) => {
  router.push(`/point/${pointId}`)
}
</script>

<style scoped>
.progress-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.overview-section {
  margin-bottom: 20px;
}

.stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
}

.stat-info {
  flex: 1;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: var(--text-primary);
}

.stat-label {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 4px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.course-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.course-item {
  border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px;
}

.course-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.course-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.course-info h3 {
  margin: 0;
}

.progress-info {
  margin-bottom: 16px;
}

.progress-stats {
  display: flex;
  justify-content: space-around;
  margin-top: 16px;
}

.stat {
  text-align: center;
}

.stat .number {
  font-size: 20px;
  font-weight: bold;
  color: var(--primary-color);
}

.stat .desc {
  color: var(--text-secondary);
  font-size: 14px;
  margin-top: 4px;
}

.recent-points {
  margin-top: 16px;
}

.recent-points h4 {
  margin: 0 0 12px 0;
}

.point-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.point-item:hover {
  background-color: #f5f7fa;
}

.point-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.trend-section, .distribution-section {
  margin-top: 20px;
}

.trend-chart {
  height: 400px;
}

.chart-container {
  text-align: center;
}

.chart-container h3 {
  margin-bottom: 20px;
}

.pie-chart {
  height: 300px;
}
</style> 